<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import { dialog } from '@/settings/components/dialog';
import {
  useStatusList,
  // useTypeList,
  OPERATE_TYPE_STICK,
  OPERATE_TYPE_PUBLISH,
  OPERATE_STATUS_ON,
  OPERATE_STATUS_OFF,
  OPERATE_STATUS_DISABLE,
  OPERATE_STATUS_REJECT,
  STATUS_PUBLISHED,
  STATUS_OFFLINE,
  STATUS_PENDING,
  TYPE_STICK_ON,
  TYPE_STICK_OFF,
  STATUS_PASS,
} from './use';

const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const form = ref({
  releaseTime: [],
  isSelected: -1,
  informationState: -1,
  keyWord: '',
});

const stateList = [
  {
    value: -1,
    text: t('settings.view.journalism.index.all'),
  },
  {
    value: STATUS_PUBLISHED,
    text: t('settings.view.journalism.index.status.1'),
  },
  {
    value: STATUS_OFFLINE,
    text: t('settings.view.journalism.index.status.3'),
  },
  {
    value: STATUS_PENDING,
    text: t('settings.view.journalism.index.status.2'),
  },
];

const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;

const statusList = useStatusList();
// const typeList = useTypeList();

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/information/page', {
    method: 'post',
    data: {
      keyWord: form.value.keyWord,
      startTime: form.value.releaseTime?.[0],
      endTime: form.value.releaseTime?.[1],
      isSelected: form.value.isSelected,
      informationState: form.value.informationState,
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}

const changeStatus = async (id: string, type: number, status: number) => {
  const { isSuccess } = await $fetch('/admin/information/operate', {
    method: 'post',
    data: {
      informationId: id,
      operateType: type,
      status: status,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

const showReject = async (record: Record<string, any>) => {
  const { button } = await dialog(() => import('./reject-window.vue'), {
    title: t('settings.view.journalism.index.refuse'),
    width: 800,
    props: {
      id: record.informationId,
      informationTitle: record.informationTitle,
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
};

const include = async (record: Record<string, any>) => {
  const { button } = await dialog(() => import('./add-to-column-window.vue'), {
    title: t('settings.view.journalism.index.includedColumns'),
    props: {
      id: record.informationId,
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #search-before>
        <div class="mb-20px">
          <ARadioGroup v-model="form.informationState" @change="refresh()">
            <ARadio v-for="item in stateList" :key="item.value" :value="item.value">
              <template #radio="{ checked }">
                <ATag :checked="checked" size="large" color="arcoblue" checkable>{{ item.text }}</ATag>
              </template>
            </ARadio>
          </ARadioGroup>
        </div>
      </template>

      <template #header>
        <AFormItem :label="$t('settings.view.journalism.index.header1')">
          <AInput v-model="form.keyWord" allow-clear />
        </AFormItem>
        <AFormItem :label="$t('settings.view.journalism.index.header3')">
          <ASelect v-model="form.isSelected">
            <AOption :value="-1">{{ $t('settings.view.journalism.index.all') }}</AOption>
            <AOption :value="1">{{ $t('settings.view.journalism.index.type.1') }}</AOption>
            <AOption :value="0">{{ $t('settings.view.journalism.index.type.2') }}</AOption>
          </ASelect>
        </AFormItem>
        <AFormItem :label="$t('settings.view.journalism.index.header2')">
          <ARangePicker show-time v-model="form.releaseTime" />
        </AFormItem>
      </template>

      <template #header-button>
        <AButton :href="`${atomgitUrl}/-/editor/drafts/new`" type="primary" target="_blank">{{ $t('settings.action.addJournalism') }}</AButton>
      </template>

      <template #columns>
        <ATableColumn :title="$t('settings.view.journalism.index.column1')" data-index="informationTitle" tooltip ellipsis />

        <ATableColumn :title="$t('settings.view.journalism.index.column3')" header-cell-class="w-10%">
          <template #cell="{ record }">
            <OpenImage :src="record.coverUrl" img-class="w-full h-80px object-cover" />
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.journalism.index.column5')" :width="200">
          <template #cell="{ record }">
            <ALink :href="`${atomgitUrl}/${record.createName}`" target="_blank">
              {{ record.createNickName || record.createName }}
            </ALink>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.journalism.index.column2')">
          <template #cell="{ record }">
            <ASpace wrap>
              <ATag v-for="(item, index) in record.labelNameList" :key="index">{{ item }}</ATag>
            </ASpace>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.journalism.index.column6')" :width="100">
          <template #cell="{ record }">
            <ATag v-if="record.informationState == 1" color="blue">{{ statusList[1] }}</ATag>
            <ATag v-else-if="record.informationState == 3" color="red">{{ statusList[3] }}</ATag>
            <ATag v-else-if="record.informationState == 4">{{ statusList[4] }}</ATag>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.journalism.index.column4')" data-index="updateTime" header-cell-class="w-10%" />

        <ATableColumn :title="$t('settings.view.journalism.index.column7')" header-cell-class="w-20%">
          <template #cell="{ record }">
            <div class="button-actions">
              <AButton
                size="small" target="_blank"
                :href="`/explore/journalism/detail/${record.informationId}`"
                v-if="record.informationState == STATUS_PUBLISHED"
              >
                {{ $t('settings.action.view') }}
              </AButton>
              <AButton
                size="small" target="_blank"
                :href="`/explore/journalism/preview/${record.informationId}`"
                v-else
              >
                {{ $t('settings.action.preview') }}
              </AButton>

              <AButton
                size="small" v-confirm
                @click="changeStatus(record.informationId, OPERATE_TYPE_STICK, OPERATE_STATUS_ON)"
                v-if="record.informationState == STATUS_PUBLISHED && record.isSelected == TYPE_STICK_OFF"
              >
                {{ $t('settings.action.pinned') }}
              </AButton>

              <AButton
                size="small" v-confirm
                @click="changeStatus(record.informationId, OPERATE_TYPE_STICK, OPERATE_STATUS_OFF)"
                v-if="record.informationState == STATUS_PUBLISHED && record.isSelected == TYPE_STICK_ON"
              >
                {{ $t('settings.action.unpinned') }}
              </AButton>

              <AButton
                size="small"
                @click="include(record)"
                v-if="record.informationState != STATUS_PENDING"
              >
                {{ $t('settings.view.journalism.index.included') }}
              </AButton>

              <AButton
                type="primary" size="small" v-confirm
                @click="changeStatus(record.informationId, OPERATE_TYPE_PUBLISH, STATUS_PASS)"
                v-if="record.informationState == STATUS_OFFLINE"
              >
                {{ $t('settings.action.publish') }}
              </AButton>

              <AButton
                status="danger" size="small" v-confirm
                @click="changeStatus(record.informationId, OPERATE_TYPE_PUBLISH, OPERATE_STATUS_DISABLE)"
                v-if="record.informationState == STATUS_PUBLISHED"
              >
                {{ $t('settings.action.downline') }}
              </AButton>

              <AButton
                type="primary" size="small" v-confirm
                @click="changeStatus(record.informationId, OPERATE_TYPE_PUBLISH, OPERATE_STATUS_ON)"
                v-if="record.informationState == STATUS_PENDING"
              >
                {{ $t('settings.view.journalism.index.pass') }}
              </AButton>

              <AButton
                v-if="record.informationState == STATUS_PENDING"
                type="primary" status="danger" size="small"
                @click="showReject(record)"
              >
                {{ $t('settings.view.journalism.index.notpass') }}
              </AButton>

              <AButton
                type="primary" status="danger" size="small" v-confirm
                @click="changeStatus(record.informationId, OPERATE_TYPE_PUBLISH, OPERATE_STATUS_REJECT)"
                v-if="record.informationState != STATUS_PENDING"
              >
                {{ $t('settings.view.journalism.index.action1') }}
              </AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
